<template>
	<view class="top">
		<view class="back-btn" @click="backPage()">
			<view class="back-icon"></view>
		</view>
		<view style="color: white;text-align: center;">已完成订单</view>
		<uni-card class="card">
			<view class="items_top">
				<view class="top_title">
					<view class="title_left">
						订单信息
					</view>
					<view class="title_right">
						已完成
					</view>
				</view>
				<view class="items_top_con">
					<view class="top_con_item">
						订单号：{{orderDetails.orderNum}}
					</view>
					<view class="top_con_item">
						服务项目：车辆保养
					</view>
					<view class="top_con_item">
						服务门店：{{shopInfo.name}}
					</view>
					<view class="top_con_item">
						下单时间：{{orderDetails.orderTime}}
					</view>
					<view class="top_con_item">
						预约时间：{{orderDetails.reservationTime}}
					</view>
					<view class="top_con_item">
						车辆：奔驰FWE4/豫A98FHJ
					</view>
					<view class="top_con_item" style="height: 100rpx;">
						备注：
					</view>
				</view>
			</view>
			<view class="items_mid">
				<view class="title_left" style="border-bottom: 2px solid lightgray;padding: 0 0 10rpx 0;">
					订单详情
				</view>
				<view class="items_mid_con">
					<view class="mid_con_item">
						<view class="mid_con_item_left">
							{{serviceInfo.serviceName}}
						</view>
						<view class="mid_con_item_right">
							{{serviceInfo.serviceOriginalPrice}}
						</view>
					</view>
					<view class="mid_con_item" style="border-bottom: 1px solid lightgray;padding: 0 0 10rpx 0;">
						<view class="mid_con_item_left">
							车辆附加费用
						</view>
						<view class="mid_con_item_right">
							{{num}}
						</view>
					</view>
					<view class="mid_con_item">
						<view class="mid_con_item_left">
							原价
						</view>
						<view class="mid_con_item_right">
							{{serviceInfo.serviceOriginalPrice}}
						</view>
					</view>
					<view class="mid_con_item" style="border-bottom: 1px solid lightgray;padding: 0 0 10rpx 0;">
						<view class="mid_con_item_left">
							店家优惠
						</view>
						<view class="mid_con_item_right" style="color: red;">
							-¥{{5}}
						</view>
					</view>
					<view class="mid_con_item" style="border-bottom: 2px solid lightgray;padding: 0 0 20rpx 0;">
						<view class="mid_con_item_left">
							优惠券
						</view>
						<view class="mid_con_item_right" style="color: red;">
							-¥{{3}}
						</view>
					</view>
					<view class="mid_con_bottom">
						<view class="mid_con_bottom_left">
							支付金额
						</view>
						<view class="mid_con_bottom_right">
							{{serviceInfo.serviceOriginalPrice}}
						</view>
					</view>
				</view>
			</view>
			<view class="items_bottom">
				
			</view>
		</uni-card>
		<uni-card class="card2">
			<view class="title_left" style="border-bottom: 2px solid lightgray;padding: 0 0 10rpx 0;">
				评价结果
			</view>
			<view class="items_bottom_con">
				<view class="bottom_con_item mb20 mt20">
					评价时间:{{evaluateInfo.find(items => items.orderId ==orderDetails.id)?.commentTime}}
				</view>
				<view class="bottom_con_item mb20">
					<view class="jieguo">
						评分结果：{{ evaluateInfo.find(items => items.orderId ==orderDetails.id)?.score }}分
					</view>
					<uni-rate :value="evaluateInfo.find(items => items.orderId ==orderDetails.id)?.score/2"  size="18" max="5"  :disable="true"
						readonly/>
				</view>
				<view class="bottom_con_item mb20">
					评语：{{evaluateInfo.find(items => items.orderId ==orderDetails.id)?.comment}}
				</view>
			</view>
		</uni-card>
	</view>
</template>

<script setup>

import {ref ,onMounted} from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import request from '../../../../utils/request';
// import { randomInt } from 'node:crypto';


const num =ref(50);

const orderId = ref("");
onLoad((options) => {
  console.log('SSSSSSSS33333SSSSSSS',options)
  orderId.value = options.id;
  console.log(orderId.value);
  getOrderDetail(orderId.value)
});

	const rateValue = ref(0);
	
	function backPage(){
		uni.navigateBack()
	}
	
	
   onMounted(()=>{
	  
		 console.log(num,"附加费用");
		console.log("你好啊1213123");
		
	})
    
	   

	

	const onChange = (e) => {
		console.log('rate发生改变:' + JSON.stringify(e));
	};
	const orderDetails  = ref([]);
   //获取订单详情
    function getOrderDetail(id){
		console.log(id,"我的id值");
		
		request(
			{
				url:`offer/orders/${id}`,
				 method: 'get',			 
    				 success(res){
				console.log("获取订单详情成功",res);
				orderDetails.value=res.data.data
				console.log("获取订单详情成功1",orderDetails.value.merchantId);
				getShopInfo(orderDetails.value.merchantId);
				getServiceInfo(orderDetails.value.serviceId)
			},
			fail(err){
				console.log("获取订单详情失败",err);
			}
			
		})
	
	}
	const shopInfo=ref([])
//获取商家信息
function getShopInfo(id){
	request({
		url:'merchant/merchant/' + id,
		method:'get',
		success(res){
			console.log("获取商家信息成功",res);
			shopInfo.value=res.data.data
			console.log("获取商家信息成功1",shopInfo.value);
		},
		fail(err){
			console.log("获取商家信息失败",err);
		}
	})
}
const serviceInfo=ref([])
//服务详情
function getServiceInfo(id){
	request({
		url:'evaluate/details/' + id,
		method:'get',
		success(res){
			console.log("获取服务详情成功",res);
			serviceInfo.value=res.data.data
			console.log("获取服务详情成功1",serviceInfo.value);
		},
		fail(err){
			console.log("获取服务详情失败",err);
		}
	})
}
const evaluateInfo=ref([])
//评价详情
 function getEvaluateInfo(){
	request({
		url:'evaluate/evaluate/list',
		method:'get',

		data:{
				pageNum:1,
				pageSize:10000,
			
			},
		method:'get',
		success(res){
			console.log("获取评价",res);
			evaluateInfo.value=res.data.rows
			console.log("获取评价1",evaluateInfo.value);
			console.log("获取评价1",evaluateInfo);
		},
		fail(err){
			console.log("获取评价详情失败",err);
		}
	})
 }
 getEvaluateInfo()

	

</script>

<style>
@import url('@/common/app.css');
.mb20 {
margin-bottom: 20rpx;
}
.mt20{
  margin-top: 20rpx;
}

.card {
margin: 0;
height: 1100rpx;
}
.card2{
  margin: 0;
  height: 300rpx;
}
.top_title{
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid lightgray;
  padding: 10rpx 0;
}
.items_top_con{
  color: #575757;
  font-weight: 500;
}
.title_left{
  color: black;
  font-size: 30rpx;
  font-weight: 700;
}
.title_right{
  color: red;
  
}
.top_con_item{
  margin: 20rpx 0;
}
.items_mid_con{
  font-weight: 500;
}
.mid_con_item{
  display: flex;
  justify-content: space-between;
  align-items: center;
   margin: 20rpx 0;
}
.mid_con_bottom{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.mid_con_bottom_right{
  color: black;
  font-size: 34rpx;
  font-weight: 700;
 
}
.bottom_con_item{
  display: flex;
  justify-content: start;
  align-items: center;
}

.back-btn{ margin-left: 20rpx; width: 50rpx; height: 50rpx; position: relative;}	
.back-icon { width: 30px; height: 30px;}	
.back-icon::before { content: ""; position: absolute; width: 20px; height: 2px; background-color: #fff; top: 80rpx; left: 47rpx; transform: translate(-50%, -50%); }
.back-icon::after { content: ""; position: absolute; width: 10px; height: 10px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); top: 70rpx; left: 30rpx;}	
</style>
